<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我 | 探索者的思考</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.03);
            }
            .blog-card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
            }
        }
    </style>
</head>

<body class="font-inter bg-light text-dark antialiased">
    <!-- 导航栏 -->
    <header id="navbar"
        class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 py-3 md:py-4">
            <div class="flex justify-between items-center">
                <a href="index.html" class="flex items-center space-x-2">
                    <span class="text-primary text-2xl"><i class="fa fa-feather"></i></span>
                    <span class="text-xl font-bold text-dark">探索者的思考</span>
                </a>

                <!-- 桌面导航 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="text-dark hover:text-primary font-medium transition-colors">首页</a>
                    <a href="about.html" class="text-dark hover:text-primary font-medium transition-colors">关于我</a>
                    <a href="contact.html" class="text-dark hover:text-primary font-medium transition-colors">联系</a>
                </nav>

                <!-- 移动端菜单按钮 -->
                <button id="menu-toggle" class="md:hidden text-dark focus:outline-none">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>

            <!-- 移动端导航菜单 -->
            <div id="mobile-menu" class="md:hidden hidden mt-4 pb-2">
                <a href="index.html"
                    class="block py-2 text-dark hover:text-primary font-medium transition-colors">首页</a>
                <a href="about.html"
                    class="block py-2 text-dark hover:text-primary font-medium transition-colors">关于我</a>
                <a href="contact.html"
                    class="block py-2 text-dark hover:text-primary font-medium transition-colors">联系</a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="mb-12 text-center">
            <h1 class="text-3xl md:text-4xl font-bold mb-4">关于我</h1>
            <p class="text-gray-600 max-w-2xl mx-auto">探索技术与生活的边界，记录成长与思考的轨迹</p>
        </section>

        <!-- 关于我内容 -->
        <section class="max-w-4xl mx-auto">
            <div class="bg-white rounded-2xl shadow-lg p-8 md:p-12 mb-12">
                <div class="flex flex-col md:flex-row items-center gap-8">
                    <div class="md:w-1/3">
                        <div class="rounded-full overflow-hidden w-64 h-64 mx-auto md:mx-0 shadow-xl">
                            <img src="https://picsum.photos/seed/person1/400/400" alt="博主照片"
                                class="w-full h-full object-cover">
                        </div>
                    </div>
                    <div class="md:w-2/3">
                        <h2 class="text-2xl font-bold mb-4">你好，我是陈可</h2>
                        <p class="text-gray-700 mb-4">
                            我是一名全栈开发工程师，同时也是一名健身爱好者和旅行探索者。我热衷于分享技术经验、生活感悟和旅行见闻。
                        </p>
                        <p class="text-gray-700 mb-4">
                            2027年即将毕业于湘潭大学通信工程专业，目前已有两个月的IT行业工作经验。目前在一家互联网公司担任实习生。
                        </p>
                        <p class="text-gray-700 mb-6">
                            工作之余，我喜欢用相机记录生活中的美好瞬间，也喜欢到不同的地方旅行，体验不同的文化和风景。这个博客是我分享知识和经验的平台，希望能与更多志同道合的朋友交流。
                        </p>

                        <div class="flex flex-wrap gap-4">
                            <a href="#"
                                class="px-4 py-2 bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">
                                <i class="fa fa-code mr-1"></i> 全栈开发
                            </a>
                            <a href="#"
                                class="px-4 py-2 bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">
                                <i class="fa fa-camera mr-1"></i> 音乐
                            </a>
                            <a href="#"
                                class="px-4 py-2 bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">
                                <i class="fa fa-plane mr-1"></i> 旅行
                            </a>
                            <a href="#"
                                class="px-4 py-2 bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">
                                <i class="fa fa-book mr-1"></i> 健身
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 技能与兴趣 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-code text-primary mr-2"></i> 技术技能
                    </h3>
                    <ul class="space-y-3">
                        <li>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">全栈开发 (webmix/entityx)</span>
                                <span>95%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 95%"></div>
                            </div>
                        </li>
                        <li>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">React & Vue.js</span>
                                <span>90%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 90%"></div>
                            </div>
                        </li>
                        <li>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">Node.js</span>
                                <span>75%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
                            </div>
                        </li>
                        <li>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">UI/UX设计</span>
                                <span>80%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-primary h-2 rounded-full" style="width: 80%"></div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="bg-white rounded-xl shadow-md p-6">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-heart text-primary mr-2"></i> 兴趣爱好
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-center">
                            <i class="fa fa-camera text-primary mr-3"></i>
                            <span>摄影：喜欢街头摄影和自然风光摄影</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-plane text-primary mr-3"></i>
                            <span>旅行：已走过中国20多个省份和10多个国家</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-book text-primary mr-3"></i>
                            <span>阅读：偏爱技术、哲学和心理学类书籍</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-music text-primary mr-3"></i>
                            <span>音乐：喜欢爵士、古典和独立音乐</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 经历 -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-12">
                <h3 class="text-xl font-bold mb-6 flex items-center">
                    <i class="fa fa-briefcase text-primary mr-2"></i> 工作经历
                </h3>

                <div class="space-y-6">
                    <div class="border-l-2 border-primary pl-6 pb-6">
                        <div class="flex flex-col md:flex-row md:items-center justify-between mb-2">
                            <h4 class="text-lg font-semibold">前端技术负责人</h4>
                            <span class="text-sm text-gray-500">2021年 - 至今</span>
                        </div>
                        <p class="text-gray-500 mb-2">ABC科技有限公司</p>
                        <ul class="list-disc pl-5 text-gray-700 space-y-1">
                            <li>负责公司核心产品的前端技术架构设计和团队管理</li>
                            <li>主导前端技术栈升级，提升开发效率和用户体验</li>
                            <li>建立前端开发规范和组件库，推动团队技术能力提升</li>
                        </ul>
                    </div>

                    <div class="border-l-2 border-primary/50 pl-6 pb-6">
                        <div class="flex flex-col md:flex-row md:items-center justify-between mb-2">
                            <h4 class="text-lg font-semibold">高级前端开发工程师</h4>
                            <span class="text-sm text-gray-500">2018年 - 2021年</span>
                        </div>
                        <p class="text-gray-500 mb-2">XYZ互联网公司</p>
                        <ul class="list-disc pl-5 text-gray-700 space-y-1">
                            <li>参与公司多个重要项目的前端开发工作</li>
                            <li>负责产品性能优化和用户体验改进</li>
                            <li>指导初级工程师成长，分享技术经验和最佳实践</li>
                        </ul>
                    </div>

                    <div class="border-l-2 border-primary/30 pl-6">
                        <div class="flex flex-col md:flex-row md:items-center justify-between mb-2">
                            <h4 class="text-lg font-semibold">前端开发工程师</h4>
                            <span class="text-sm text-gray-500">2015年 - 2018年</span>
                        </div>
                        <p class="text-gray-500 mb-2">123软件公司</p>
                        <ul class="list-disc pl-5 text-gray-700 space-y-1">
                            <li>负责公司网站和Web应用的开发与维护</li>
                            <li>参与前端技术选型和架构设计</li>
                            <li>与UI设计师和后端团队紧密合作，确保产品质量</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 联系按钮 -->
            <div class="text-center">
                <a href="contact.html"
                    class="inline-flex items-center px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">
                    <i class="fa fa-envelope mr-2"></i> 联系我
                </a>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <span class="text-primary text-2xl"><i class="fa fa-feather"></i></span>
                        <span class="text-xl font-bold">探索者的思考</span>
                    </div>
                    <p class="text-gray-400 mb-6">
                        记录技术与生活的思考，分享知识与经验的积累。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-instagram text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">快速链接</h3>
                    <ul class="space-y-3">
                        <li><a href="index.html" class="text-gray-400 hover:text-primary transition-colors">首页</a></li>
                        <li><a href="about.html" class="text-gray-400 hover:text-primary transition-colors">关于我</a></li>
                        <li><a href="contact.html" class="text-gray-400 hover:text-primary transition-colors">联系</a>
                        </li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">使用条款</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">文章分类</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">技术 (42)</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">生活 (28)</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">旅行 (16)</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">阅读 (12)</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-primary transition-colors">摄影 (8)</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-lg font-bold mb-6">联系方式</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-primary"></i>
                            <span class="text-gray-400">湖南省湘潭市雨湖区湘潭大学西湖一栋303</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-primary"></i>
                            <a href="mailto:hello@example.com"
                                class="text-gray-400 hover:text-primary transition-colors">glddyjark@gmail.com</a>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-primary"></i>
                            <a href="tel:+8613100001234" class="text-gray-400 hover:text-primary transition-colors">+86
                                155-7479-1017</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">
                        © 2023 探索者的思考. 保留所有权利.
                    </p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors">使用条款</a>
                        <a href="#" class="text-gray-500 hover:text-primary text-sm transition-colors">Cookie政策</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function () {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-3', 'md:py-4', 'shadow-sm');
            } else {
                navbar.classList.add('py-3', 'md:py-4', 'shadow-sm');
                navbar.classList.remove('py-2', 'shadow-md');
            }
        });

        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function () {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                const targetId = this.getAttribute('href');
                if (targetId === '#') return;

                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });

                    // 关闭移动端菜单
                    document.getElementById('mobile-menu').classList.add('hidden');
                }
            });
        });
    </script>

</body>

</html>